import dateUtil from "@/utils/myutils.js"

//工单产出/不良品趋势图
const gdccfxOption = (title, barName, lineName, data , echarts) => {
    let x = data.map(item =>{
        return dateUtil.formatTime(item.time, 'dd')
    })
    let num = data.map(item =>{
        return item.num
    })
    let complete_rate = data.map(item =>{
        let data = title == '工单产出趋势图' ? item.complete : item.rate
        return data
    })
    let option = {
        title: [{
            text: title + '(' + dateUtil.formatTime(new Date(), 'yyyy.MM') + ')',
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
        }, ],
        grid: {
            left: 30,
            right: 35,
            top: 60,
            bottom: 30,
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        legend: {
            right: '0',
            textStyle: {
                color: '#fff',
                fontSize: 10,
            }
        },
        xAxis: [{
            type: 'category',
            data: x,
            axisPointer: {
                type: 'shadow'
            },
        }],
        yAxis: [{
                name: barName,
                type: 'value',
                axisLabel: {
                    formatter: function (value) {
                        return value
                    }
                },
                splitLine: {
                    show: false,
                }
            },
            {
                name: lineName,
                type: 'value',
                axisLabel: {
                    formatter: function (value) {
                        return `${value}${title == '不良品趋势图' ? '%' : ''}`
                    }
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: 'grey'
                    }
                }
            }
        ],
        series: [{
                name: barName,
                type: 'bar',
                barWidth: 15,
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#04f9fe'
                        },
                        {
                            offset: 0.8,
                            color: '#66ffff'
                        },
                        {
                            offset: 1,
                            color: '#04f9fe'
                        }
                    ]),
                },
                data: num
            },
            {
                name: lineName,
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value) {
                        return value;
                    }
                },
                itemStyle: {
                    color: '#76f2ac'
                },
                data: complete_rate
            }
        ]
    }
    return option
}


//员工绩效
const ygjxOption = (echarts,data) => {
    let x = data.map(item =>{
        return item.cnt
    })
    let y = data.map(item =>{
        return item.name
    })
    let option = {
        title: {
            text: '员工绩效Top5',
            textStyle: {
                color: '#fff',
                fontSize: 12,
            },
        },
        grid: {
            left: 40,
            right: 30,
            top: 30,
            bottom: 30
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        xAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'grey'
                }
            },
        },
        yAxis: {
            type: 'category',
            data: y,
            axisLabel:{
                textStyle:{
                    color:'#fff',
                    fontSize:14
                }
            }
        },
        series: [{
            name: '产出',
            type: 'bar',
            barWidth: 15,
            label: {
                show: true,
                position: 'right',
                color:'#fff'
            },
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#04f9fe'
                    },
                    {
                        offset: 0.8,
                        color: '#66ffff'
                    },
                    {
                        offset: 1,
                        color: '#04f9fe'
                    }
                ]),
            },
            data: x
        }]
    }
    return option
}


//不良品项分布图
const blpxOption = (data) => {
    let c = data.map(i =>{
        return{
            value:i.cnt,
            name:i.name
        }
    })
    let option = {
        title: {
            text: '不良品项分布图',
            textStyle: {
                color: '#fff',
                fontSize: 12,
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: '20',
            bottom: '20',
            textStyle:{
                color:'#fff',
                fontSize:10
            }
        },
        series: [{
            type: 'pie',
            radius: ['40%', '60%'],
            label:{
                color:'#fff'
            },
            data:c
        }]
    }
    return option
}


export {
    gdccfxOption,
    ygjxOption,
    blpxOption
}